<template>
	<view class="container">
		<u-form :model="form" ref="uForm" label-width="250">
			<u-form-item label="业务负责人" prop="name">
				<u-input v-model="form.name" placeholder="业务负责人" disabled />
			</u-form-item>
			<u-form-item label="业务名" prop="sealName">
				<u-input v-model="form.businessName" placeholder="请输入业务名" />
			</u-form-item>
			<u-form-item label="业务说明" prop="desc">
				<u-input v-model="form.desc" placeholder="请输入业务说明" type="textarea" />
			</u-form-item>
			<u-form-item label="业务开始时间" prop="start">
				<u-calendar v-model="startShow" :mode="mode" @change="startChange" min-date="1950-01-01"
					max-date="2030-01-01"></u-calendar>
				<u-input v-model='form.start' type="select" @click="startShow = true" placeholder="请设置业务开始时间" />
			</u-form-item>
			<u-form-item label="业务结束时间" prop="end">
				<u-calendar v-model="endShow" :mode="mode" @change="endChange" min-date="1950-01-01"
					max-date="2030-01-01"></u-calendar>
				<u-input v-model='form.end' type="select" @click="endShow = true" placeholder="请设置业务结束时间" />
			</u-form-item>
		</u-form>
		<view class="btn">
			<u-button shape="square" type="primary" @click="submit">提交</u-button>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import askBusinessApi from '../../api/askBusiness.js'
	export default {
		data() {
			return {
				form: {
					// 业务负责人
					name: '',
					// 业务名
					businessName: '',
					// 业务说明
					desc: '',
					// 开始时间,
					start: '',
					// 结束时间
					end: '',
				},
				// 是否显示业务开始时间的日历
				startShow: false,
				// 是否显示业务结束时间的日历
				endShow: false,
				// 日历的模式是范围模式
				mode: 'date',
				// 表单验证规则
				rules: {
					desc: [{
						required: true,
						message: '请输入业务说明',
						trigger: ['change', 'blur']
					}],
					businessName: [{
						required: true,
						message: '请输入业务名',
						trigger: ['change', 'blur']
					}],
					start: [{
						required: true,
						message: '请设置业务开始时间',
						trigger: ['change', 'blur']
					}],
					end: [{
						required: true,
						message: '请设置业务结束时间',
						trigger: ['change', 'blur']
					}]
				}
			};
		},
		methods: {
			// 显示消息提示框
			showToast(title, type) {
				this.$refs.uToast.show({
					title,
					type,
					position: 'top'
				})
			},
			// 业务开始时间日历改变的回调
			startChange(e) {
				console.log(e);
				this.form.start = e.result
			},
			// 业务结束时间日历改变的回调
			endChange(e) {
				console.log(e);
				this.form.end = e.result
			},
			// 提交表单的回调
			submit() {
				// 验证表单
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						const {
							name,
							businessName,
							desc,
							start,
							end,
						} = this.form
						askBusinessApi.askBusiness({
							businessBy: name,
							businessName: businessName,
							businessRemark: desc,
							businessBegin: start,
							businessEnd: end
						}).then(res => {
							console.log(res)
							this.showToast('提交成功', 'success')
							setTimeout(() => {
								this.$Router.replaceAll({
									name: 'index'
								})
							}, 1000)
						}).catch(error => {
							this.showToast('提交失败', 'error')
						})
					} else {
						console.log('验证失败');
					}
				});
			},
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			this.form.name = this.$store.state.userInfo.username
		}
	};
</script>

<style scoped lang="scss">
	.container {
		width: 90%;
		margin: 0 auto;

		.btn {
			margin-top: 20px;
		}
	}
</style>
